<template>
  <scroll-view class="home-app d-flex flex-column" scroll-y @scrolltolower="scrollBottomFn">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <scroll-view class="scroll" v-if="messageInfo.length" scroll-y>
      <view class="s_contain" v-for="item in messageInfo" :key="item.createTime">
        <view class="c_top">{{ item.createTime }}</view>
        <view class="c_bottom">
          <view class="b_top">
            <text class="p_text">{{ item.noticeTitle }}</text>
            <text class="dian" v-if="item.readStatus === '0'"></text>
          </view>
          <view class="b_middle">{{ item.noticeContent }}</view>
          <view class="b_bootom" @click="handleGocheck(item)">
            <view>立即查看</view>
            <view>
              <image src="@/static/images/aboutUs/arrow-right.png" mode="aspectFit|aspectFill|widthFix"
                lazy-load="false" />
            </view>
          </view>
        </view>
      </view>
      <view class="downLoad">--加载完成，共{{ messageInfo.length }}条数据--</view>
    </scroll-view>
    <noneState v-else></noneState>
  </scroll-view>
</template>

<script>
import { getMessage, exitMessage } from "@/api/pages/home";
import noneState from "../components/noneState.vue";

export default {
  components: {
    noneState
  },
  data() {
    return {
      styleData: {
        tabbarText: "消息",
        show: true,
      },
      messageInfo: [],
      pageNum: 1,
      pageTotal: 1,
      pageSize: 10,
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) { },
  onPageScroll({ scrollTop }) {
    console.log(scrollTop);
  },
  async onShow() {
    // this.messageList();
  },
  onReady() { },
  mounted() {
    this.messageList();
  },
  onReachBottom() {
    console.log('触底了');
  },
  methods: {
    async messageList() {
      // 获取消息列表
      const res = await getMessage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // isAsc: 'desc'
      });
      if (res.code === 200) {
        this.pageTotal = Math.ceil(res.total / this.pageSize)
        if (this.pageNum === 1) {
          this.messageInfo = res.rows.reverse();
        } else {
          res.rows.forEach((suc) => {
            this.messageInfo.push(suc)
          })
        }
      }
    },
    //查看消息
    handleGocheck(item) {
      console.log(item);
      if (item.businessType === '0') {
      }
      if (item.businessType === '1') {
        uni.navigateTo({
          url: '/pages/recruit/mine/myWallet/index'
        })
      }
      if (item.businessType === '2') {
        uni.navigateTo({
          url: '/pages/recruit/mine/myApply/index'
        })
      }
      if (item.businessType === '3') {
        uni.navigateTo({
          url: '/pages/recruit/post/postDetail/index?positionId=' + item.parameter
        })
      }
      if(item.readStatus==='0'){
        exitMessage(item.noticeId).then((res) => {
        if (res.code === 200) {
          this.messageList()
        }
      })
      }
    },
    // 监听滑动到底部
    scrollBottomFn() {
      console.log(111);
      this.pageNum += 1
      if (this.pageNum <= this.pageTotal) {
        this.messageList()
      } else {
        uni.showToast({
          title: '没有更多了',
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.home-app {
  position: relative;
  height: 100vh;
  overflow: auto;

  .scroll {
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24rpx;

    .s_contain {
      width: 702rpx;
      height: 335rpx;
      margin: 20rpx 0;
      border-radius: 16rpx;

      .c_top {
        width: 100%;
        font-size: 24rpx;
        color: #00000073;
        text-align: center;
        height: 57rpx;
      }

      .c_bottom {
        width: 100%;
        height: 278rpx;
        background: #fff;
        border-radius: 16rpx;
        padding: 0 20rpx;
        box-sizing: border-box;

        .b_top {
          height: 85rpx;
          display: flex;
          align-items: center;

          .p_text {
            font-size: 32rpx;
            color: #000000e0;
            margin-right: 10rpx;
          }

          .dian {
            width: 12rpx;
            height: 12rpx;
            background: #cd000a;
            border-radius: 12rpx;
          }
        }

        .b_middle {
          font-size: 24rpx;
          color: #00000073;
          line-height: 36rpx;
          height: 110rpx;
        }

        .b_bootom {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          color: #000000e0;
          height: 85rpx;
          align-items: center;

          image {
            width: 22rpx;
            height: 22rpx;
          }
        }
      }
    }

    .downLoad {
      font-size: 24rpx;
      color: #00000033;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      margin-bottom: 20rpx;
    }
  }
}
</style>
